import { useState, useEffect } from 'react'
import { LeftOutlined, RightOutlined } from '@ant-design/icons'
import { useHistory } from 'react-router-dom'
import {Rate, Tabs, Divider, Alert, Button} from 'antd'

import http from '../../request'
import { torem } from "../../assets/js/rem"
import store from '../../store'

const Details = () => {
  const data = store.getState().cinema
  const [img, setImg] = useState([])
  const [move, setMove] = useState({})
  const [option, setOption] = useState(0)
  const [item, setItem] = useState({})
  const history = useHistory()
  const baseURL = 'https://gw.alicdn.com/tfs/'

  const items = [
    {
      key: '1',
      label: <div className='u-border-right u-p-l-15 u-p-r-15'>今天 12-15</div>,
      children: <div>
        <Alert style={{color:'#ed6a0c',borderRadius:0,lineHeight:torem(15)}} message="温馨提示:开场前15分钟关闭在线售票" type="warning" />
        <div className='u-p-l-15 u-p-r-15'>
          <Divider plain dashed style={{color:'#969799',marginTop:5}}>上午场</Divider>
          <div className='u-flex u-p-15 u-font-12' style={{color:'#999'}}>
            <div>
              <div className='u-h2 u-font-18' style={{color:'#333'}}>10:30</div>
              <div >10:30 散场</div>
            </div>
            <div className='u-m-l-10'>
              <div>国语 3D</div>
              <div>三号厅</div>
            </div>
            <div className='u-m-l-85'>
              <div className='u-h2 u-font-18' style={{color:'#fd2c23',lineHeight:torem(15)}}>¥18.8</div>
              <div style={{textDecoration:'line-through',lineHeight:torem(15)}}>¥50</div>
              <div className='u-p-l-2 u-p-r-2' style={{backgroundColor:'#ff8625',color:'#fff'}}>新人专享</div>
            </div>
            <Button type='primary' size='small' style={{borderRadius:0}} className='u-m-l-20' ghost>购买</Button>
          </div>
          <Divider plain dashed style={{color:'#969799',marginTop:5}}>上午场</Divider>
          <div className='u-flex u-p-15 u-font-12' style={{color:'#999'}}>
            <div>
              <div className='u-h2 u-font-18' style={{color:'#333'}}>13:30</div>
              <div >13:30 散场</div>
            </div>
            <div className='u-m-l-10'>
              <div>国语 3D</div>
              <div>三号厅</div>
            </div>
            <div className='u-m-l-85'>
              <div className='u-h2 u-font-18' style={{color:'#fd2c23',lineHeight:torem(15)}}>28.8</div>
              <div style={{textDecoration:'line-through',lineHeight:torem(15)}}>¥50</div>
              <div className='u-p-l-2 u-p-r-2' style={{backgroundColor:'#ff8625',color:'#fff'}}>新人专享</div>
            </div>
            <Button type='primary' size='small' style={{borderRadius:0}} className='u-m-l-20' ghost>购买</Button>
          </div>
          <div className='u-flex u-p-15 u-font-12' style={{color:'#999'}}>
            <div>
              <div className='u-h2 u-font-18' style={{color:'#333'}}>17:30</div>
              <div >17:30 散场</div>
            </div>
            <div className='u-m-l-10'>
              <div>国语 3D</div>
              <div>三号厅</div>
            </div>
            <div className='u-m-l-85'>
              <div className='u-h2 u-font-18' style={{color:'#fd2c23',lineHeight:torem(15)}}>38.8</div>
              <div style={{textDecoration:'line-through',lineHeight:torem(15)}}>¥50</div>
              <div className='u-p-l-2 u-p-r-2' style={{backgroundColor:'#ff8625',color:'#fff'}}>新人专享</div>
            </div>
            <Button type='primary' size='small' style={{borderRadius:0}} className='u-m-l-20' ghost>购买</Button>
          </div>
        </div>
      </div>,
    },
    {
      key: '2',
      label: <div className='u-border-right u-p-l-15 u-p-r-15'>明天 12-16</div>,
      children: <div>
      <Alert style={{color:'#ed6a0c',borderRadius:0,lineHeight:torem(15)}} message="温馨提示:开场前15分钟关闭在线售票" type="warning" />
      <div className='u-p-l-15 u-p-r-15'>
        <Divider plain dashed style={{color:'#969799',marginTop:5}}>下午场</Divider>
        <div className='u-flex u-p-15 u-font-12' style={{color:'#999'}}>
          <div>
            <div className='u-h2 u-font-18' style={{color:'#333'}}>13:30</div>
            <div >13:30 散场</div>
          </div>
          <div className='u-m-l-10'>
            <div>国语 3D</div>
            <div>三号厅</div>
          </div>
          <div className='u-m-l-85'>
            <div className='u-h2 u-font-18' style={{color:'#fd2c23',lineHeight:torem(15)}}>¥28.8</div>
            <div style={{textDecoration:'line-through',lineHeight:torem(15)}}>¥50</div>
            <div className='u-p-l-2 u-p-r-2' style={{backgroundColor:'#ff8625',color:'#fff'}}>新人专享</div>
          </div>
          <Button type='primary' size='small' style={{borderRadius:0}} className='u-m-l-20' ghost>购买</Button>
        </div>
        <div className='u-flex u-p-15 u-font-12' style={{color:'#999'}}>
          <div>
            <div className='u-h2 u-font-18' style={{color:'#333'}}>17:30</div>
            <div >17:30 散场</div>
          </div>
          <div className='u-m-l-10'>
            <div>国语 3D</div>
            <div>三号厅</div>
          </div>
          <div className='u-m-l-85'>
            <div className='u-h2 u-font-18' style={{color:'#fd2c23',lineHeight:torem(15)}}>¥38.8</div>
            <div style={{textDecoration:'line-through',lineHeight:torem(15)}}>¥50</div>
            <div className='u-p-l-2 u-p-r-2' style={{backgroundColor:'#ff8625',color:'#fff'}}>新人专享</div>
          </div>
          <Button type='primary' size='small' style={{borderRadius:0}} className='u-m-l-20' ghost>购买</Button>
        </div>
        <Divider plain dashed style={{color:'#969799',marginTop:5}}>晚上场</Divider>
        <div className='u-flex u-p-15 u-font-12' style={{color:'#999'}}>
          <div>
            <div className='u-h2 u-font-18' style={{color:'#333'}}>20:30</div>
            <div >13:30 散场</div>
          </div>
          <div className='u-m-l-10'>
            <div>国语 3D</div>
            <div>三号厅</div>
          </div>
          <div className='u-m-l-85'>
            <div className='u-h2 u-font-18' style={{color:'#fd2c23',lineHeight:torem(15)}}>¥28.8</div>
            <div style={{textDecoration:'line-through',lineHeight:torem(15)}}>¥50</div>
            <div className='u-p-l-2 u-p-r-2' style={{backgroundColor:'#ff8625',color:'#fff'}}>新人专享</div>
          </div>
          <Button type='primary' size='small' style={{borderRadius:0}} className='u-m-l-20' ghost>购买</Button>
        </div>
        <div className='u-flex u-p-15 u-font-12' style={{color:'#999'}}>
          <div>
            <div className='u-h2 u-font-18' style={{color:'#333'}}>23:30</div>
            <div >17:30 散场</div>
          </div>
          <div className='u-m-l-10'>
            <div>国语 3D</div>
            <div>三号厅</div>
          </div>
          <div className='u-m-l-85'>
            <div className='u-h2 u-font-18' style={{color:'#fd2c23',lineHeight:torem(15)}}>¥38.8</div>
            <div style={{textDecoration:'line-through',lineHeight:torem(15)}}>¥50</div>
            <div className='u-p-l-2 u-p-r-2' style={{backgroundColor:'#ff8625',color:'#fff'}}>新人专享</div>
          </div>
          <Button type='primary' size='small' style={{borderRadius:0}} className='u-m-l-20' ghost>购买</Button>
        </div>
      </div>
    </div>,
    },
    {
      key: '3',
      label: <div className='u-border-right u-p-l-15 u-p-r-15'>后天 12-17</div>,
      children: <div>
        <Alert style={{color:'#ed6a0c',borderRadius:0,lineHeight:torem(15)}} message="温馨提示:开场前15分钟关闭在线售票" type="warning" />
        <div className='u-p-l-15 u-p-r-15'>
          <Divider plain dashed style={{color:'#969799',marginTop:5}}>晚上场</Divider>
          <div className='u-flex u-p-15 u-font-12' style={{color:'#999'}}>
            <div>
              <div className='u-h2 u-font-18' style={{color:'#333'}}>30:30</div>
              <div >20:30 散场</div>
            </div>
            <div className='u-m-l-10'>
              <div>国语 3D</div>
              <div>三号厅</div>
            </div>
            <div className='u-m-l-85'>
              <div className='u-h2 u-font-18' style={{color:'#fd2c23',lineHeight:torem(15)}}>28.8</div>
              <div style={{textDecoration:'line-through',lineHeight:torem(15)}}>¥50</div>
              <div className='u-p-l-2 u-p-r-2' style={{backgroundColor:'#ff8625',color:'#fff'}}>新人专享</div>
            </div>
            <Button type='primary' size='small' style={{borderRadius:0}} className='u-m-l-20' ghost>购买</Button>
          </div>
          <div className='u-flex u-p-15 u-font-12' style={{color:'#999'}}>
            <div>
              <div className='u-h2 u-font-18' style={{color:'#333'}}>23:30</div>
              <div >17:30 散场</div>
            </div>
            <div className='u-m-l-10'>
              <div>国语 3D</div>
              <div>三号厅</div>
            </div>
            <div className='u-m-l-85'>
              <div className='u-h2 u-font-18' style={{color:'#fd2c23',lineHeight:torem(15)}}>38.8</div>
              <div style={{textDecoration:'line-through',lineHeight:torem(15)}}>¥50</div>
              <div className='u-p-l-2 u-p-r-2' style={{backgroundColor:'#ff8625',color:'#fff'}}>新人专享</div>
            </div>
            <Button type='primary' size='small' style={{borderRadius:0}} className='u-m-l-20' ghost>购买</Button>
          </div>
        </div>
      </div>,
    },
    {
      key: '4',
      label: <div className='u-border-right u-p-l-15 u-p-r-15'>周五 12-18</div>,
      children: <div>
        <Alert style={{color:'#ed6a0c',borderRadius:0,lineHeight:torem(15)}} message="温馨提示:开场前15分钟关闭在线售票" type="warning" />
        <div className='u-p-l-15 u-p-r-15'>
          <Divider plain dashed style={{color:'#969799',marginTop:5}}>上午场</Divider>
          <div className='u-flex u-p-15 u-font-12' style={{color:'#999'}}>
            <div>
              <div className='u-h2 u-font-18' style={{color:'#333'}}>10:30</div>
              <div >10:30 散场</div>
            </div>
            <div className='u-m-l-10'>
              <div>国语 3D</div>
              <div>三号厅</div>
            </div>
            <div className='u-m-l-85'>
              <div className='u-h2 u-font-18' style={{color:'#fd2c23',lineHeight:torem(15)}}>¥18.8</div>
              <div style={{textDecoration:'line-through',lineHeight:torem(15)}}>¥50</div>
              <div className='u-p-l-2 u-p-r-2' style={{backgroundColor:'#ff8625',color:'#fff'}}>新人专享</div>
            </div>
            <Button type='primary' size='small' style={{borderRadius:0}} className='u-m-l-20' ghost>购买</Button>
          </div>
        </div>
      </div>,
    },
  ];

  useEffect(() => {
    store.dispatch({type:'changeFooter', data:false})
    getImg()
  }, [])
  return (
    <div>
      <div className="u-flex u-p-l-20 u-border-bottom" style={{ lineHeight: torem(40) }}>
        <div onClick={brak} style={{ width: torem(40) }}><LeftOutlined /></div>
      </div>
      <div className='u-p-l-15 u-p-t-10 u-p-b-10 u-border-bottom'>
        <div className='u-h2'>{data.cinemaName}</div>
        <div className='u-font-13' style={{ color: '#666', lineHeight: torem(25) }}>{data.address}</div>
      </div>
      <div className='u-font-12 u-p-l-15 u-border-bottom' style={{ color: '#808080', lineHeight: torem(40) }}>
        <span className='u-m-l-5 u-m-r-5' style={{ backgroundColor: '#ff8625', color: '#fff', paddingLeft: 1, paddingRight: 1 }}>新人专享</span>
        <span className='u-m-l-5'>新人特惠，名额有限抢完即止</span>
        <span style={{ marginLeft: torem(105) }}><RightOutlined /></span>
      </div>
      <div className='u-background-image u-relative' style={{ height: torem(120), overflow: 'scroll' }}>
        <div className='u-p-l-10 u-text-nowrap u-absolute' style={{ transition: 'all 1s', bottom: 0, ...move }}>
          {img.map((i, ind) => <div className='u-float u-m-r-10' onClick={(event) => avtion(event, ind)} key={i.id} style={option === ind ? { height: torem(90), transform: 'scale(1.1)', border: '1px solid #fff', transition: 'all 1s' } : { height: torem(90), transition: 'all 1s' }}><img style={{ height: '100%' }} src={baseURL + i.poster} alt='' /></div>)}
        </div>
      </div>
      <div className='u-p-15 u-flex-col'>
        <h2 className='u-h2'>{item.showName}</h2>
        <div><Rate disabled style={{ fontSize: torem(12) }} allowHalf value={item.remark - 5} /><span className='u-font-12' style={{ color: '#9c9c9c' }}>{item.remark}</span></div>
      </div>
      <div>
        <Tabs defaultActiveKey="1" tabBarGutter={0} items={items}/>
      </div>
    </div>
  )
  function brak() {
    history.push('/cinema')
  }
  function getImg() {
    http('/cinema_detail', this).then(res => {
      if (res.data.data.returnCode === '0') {
        setImg(res.data.data.returnValue.shows)
        setItem(res.data.data.returnValue.shows[0])
      }
      console.log(res.data.data.returnValue.shows);
    }).catch(err => console.log(err))
  }
  function avtion(event, ind) {
    const start = document.body.offsetWidth / 2
    const max = event.nativeEvent.path[2].offsetWidth - start
    // 点击项的中轴位置
    const current = event.target.offsetLeft + event.target.offsetWidth / 2
    let move = current - start
    if (current < start) {
      move = 0
    } else if (current > max) {
      move = max - start
    }
    setMove({ 'transform': `translateX(${-move}px)` })
    setItem(img[ind])
    setOption(ind)
  }
}

export default Details